<template>
<!-- 如果父组件上的属性，是直接应用到子组件的根标签上 -->
  <input 
     class="ipt" 
     @input="handleInput"
     :class="{
       succeed:state==='succeed',
       error:state==='error',
       }"
      @blur="bluFn"
  >
</template>

<script>
// import { Notify } from 'vant';
export default {
  props: {
     // 要求传入正则表达式 RegExp
    rules:RegExp,
    msg:{
      type:String,
      // 如果没有传入，就使用默认值
      default:'输入数据不合法',
    }
  },
  data () {
    return {
      state:true,
    }
  },
   methods:{
     handleInput(e){
      //  e.target 触发事件的真实 DOM 节点
       this.$emit('input',e.target.value);
       
     },
     bluFn(e){
      //  console.log('失起焦点')
      //  console.log(e.target.value)

      const str = e.target.value.trim();
       // 如果有有传入表达式
      if(this.rules){
         // 正则对象.test(字符串)        可以用来校验数据
        if(this.rules.test(str)){
          console.log(this.rules,str,'校验通过')
          this.state='succeed'
        }else{
          // console.log(this.rules,str,'正则校验失败')
          this.$notify({ type: 'warning', message: this.msg,duration: 1000, })
          this.state='error'
        }
      }
      
     }
   }
}
</script>

<style lang="less" scoped>
.ipt {
    width:318px;
    height:48px;
    font-size:20px;
    border:none;
    outline:none;
    border-bottom: 2px solid #ccc;
    display: block;
    margin: 20px auto;
    background-color: transparent;
}
.succeed{
  border-bottom-color: green;
  color:green;
}
.error{
  border-bottom-color: red;
  color:red;
}
</style>